<template>
  <div class="app-container" style="margin-left: 20px">
    <div class="filter-container">
      <el-select v-model="listQuery.group_name" clearable placeholder="业务线" @change="getProjectN">
        <el-option v-for="item in group_namelist" :key="item.group_name" :label="item.group_name" :value="item.group_id" />
      </el-select>
      <el-select v-model="listQuery.project_name" style="margin-left: 20px" clearable placeholder="项目" @change="handleFilter">
        <el-option v-for="item in project_namelist" :key="item.project_name" :label="item.project_name" :value="item.project_name" />
      </el-select>
      <!-- <el-select v-model="listQuery.is_deploy" style="margin-left: 20px" clearable placeholder="部署" @change="handleFilter">
        <el-option v-for="item in deployOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select> -->
      <el-select v-model="listQuery.case_type" style="margin-left: 20px" clearable placeholder="类型" @change="handleFilter">
        <el-option v-for="item in caseOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-model="listQuery.case_name" placeholder="请输入用例名称" clearable style="margin-left: 20px;width: 200px;" @keyup.enter.native="handleFilter" />
      <el-row style="margin-top: 20px">
        <el-button type="primary" @click="addCase">添加用例</el-button>
      </el-row>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }" :data="list" fit highlight-current-row style="width: 100%">
      <el-table-column label="序号" width="70px" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column v-if="false" label="ID" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showReviewer" label="业务" width="110px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.group_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showReviewer" label="项目" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.project_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showReviewer" label="用例名称" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.case_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.create_time | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
        </template>
      </el-table-column>
      <el-table-column type="expand" show-overflow-tooltip label="用例地址" width="100px" header-align="center" align="left">
        <template slot-scope="{ row }">
          <span>{{ row.case_value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用例类型" width="200px" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.case_type == 1" effect="plain" :type="'success'" disable-transitions>WEB_UI</el-tag>
          <el-tag v-else-if="scope.row.case_type == 2" effect="plain" :type="'info'">APP_UI</el-tag>
          <el-tag v-else-if="scope.row.case_type == 3" effect="plain" :type="'danger'">API</el-tag>
          <!-- <el-tag v-else style="margin-left: 10px">接口自动化</span> -->
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="200px" align="center">
        <template slot-scope="{ row }">
          <span> {{ row.update_time | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="is_deploy" label="是否部署" align="center" width="200px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.is_deploy === 0 ? 'danger' : 'success'" disable-transitions>{{ deployOptions[scope.row.is_deploy].label }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="tableRowEdit(row)">
            编辑
          </el-button>
          <!-- <el-button v-if="row.is_deploy === 1 & row.case_type != 3" size="mini" :disabled="true" @click="tableRowDeploy(row.id)">
            部署
          </el-button> -->
          <!-- <el-button v-if="row.case_type === 1 || row.case_type === 2" size="mini" type="success" @click="tableRowDeploy(row.id)">
            部署
          </el-button> -->

        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page_num" :limit.sync="listQuery.page_per" @pagination="getList" />
    <mini v-if="dialogAdd.show" ref="popBox" :edit="edit" :size-forms="sizeForms" destroy-on-close="true" :title="edit ? '编辑用例' : '添加用例'" @closePop="closePop" />
  </div>
</template>
<script>
import { Message } from 'element-ui'
import mini from './components/edit'
import { getCaseList, remoteGit } from '@/api/case'
import { getGroupName, getProjectName } from '@/api/report'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

// const deployOptions = [
//   { value: 0, label: '未部署' },
//   { value: 1, label: '已部署' }
// ]

const caseOptions = [
  { value: 1, label: 'WEB_UI自动化' },
  { value: 2, label: 'APP_UI自动化' },
  { value: 3, label: '接口自动化' }
]

export default {
  name: 'ComplexTable',
  components: {
    Pagination,
    mini
  },
  data() {
    return {
      dialogAdd: {
        show: false
      },
      tableKey: 0,
      list: null,
      total: 0,
      edit: false,
      listLoading: true,
      listQuery: {
        group_name: '',
        is_deploy: '',
        project_name: '',
        case_type: '',
        case_name: '',
        page_num: 1,
        page_per: 10
      },
      group_namelist: '',
      project_namelist: '',
      caseOptions,
      // deployOptions,
      showReviewer: true,
      sizeForms: {}
    }
  },
  created() {
    this.getList()
    this.getGroupN()
  },
  methods: {
    closePop(formName) {
      this.dialogAdd.show = false
      this.sizeForms = {
        case_name: '',
        group_name: '',
        project_name: '',
        case_type: '',
        case_value: ''
      }
    },
    getList() {
      this.listLoading = true
      getCaseList(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    getGroupN() {
      getGroupName()
        .then((res) => {
          this.group_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getProjectN(groudId) {
      // groudId && (this.listQuery.project_name = '')
      if (!groudId) {
        this.project_namelist = ''
        this.listQuery.project_name = ''
        this.getList()
        return
      }
      getProjectName(groudId)
        .then((res) => {
          this.project_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    handleFilter(groudId) {
      this.listQuery.page_num = 1
      this.listQuery.page_per = 10
      this.getList()
    },
    addCase() {
      this.dialogAdd.show = true
      this.edit = false
      this.sizeForms.gns = this.group_namelist
    },
    tableRowEdit(row) {
      this.edit = true
      this.sizeForms = row
      this.sizeForms.gns = this.group_namelist
      this.dialogAdd.show = true
    },
    tableRowDeploy(caseId) {
      this.listLoading = true
      remoteGit(caseId)
        .then((res) => {
          this.listLoading = false

          if (res.msg === 1) {
            Message.success('部署成功')
            this.getList()
          } else {
            Message.error('部署失败')
          }
        })
    }
  }
}

</script>
